<template>
	<view class="order">
		<view class="tabs u-flex">
			<view class="li" v-for="(item,index) in tabsList" :key="index" @click="tabsChange(index)">
				<view :class="[tabsIndex == index?'li-text-active':'li-text']">{{item.name}}</view>
				<image
					:src="tabsIndex == index?'https://qn.mtj.cdydsy.com/user_client/new-images/user-order-base.png':''"
					class="line"></image>
			</view>
		</view>
		<view class="box">
			<view class="li u-flex-col u-col-center" v-for="item in list" :key="item.icon"
				@click="orderChange(item.path)">
				<uni-badge class="li-icon" :text="item.badge" :maxNum="99" absolute="rightTop" size="small">
					<image :src="item.icon" mode="aspectFill" class="icon"></image>
				</uni-badge>
				<view class="li-text">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { navigateTo } from '@/utils/router.js'

	const tabsIndex = ref(0)

	const tabsList = [{
			name: "我的订单"
		},
		{
			name: "拼团订单"
		}
	]

	const list = computed(() => {
		return tabsIndex.value === 0 ? orderList : groupBuyingOrderList;
	});

	const orderList = [{
			badge: 2,
			icon: "/static/images/dfk.svg",
			name: "待付款",
			path: "/subPackages/order/list?tabsCurrent=1"
		},
		{
			badge: 20,
			icon: "/static/images/dsh.svg",
			name: "待收货",
			path: "/subPackages/order/list?tabsCurrent=3"
		},
		{
			badge: 2,
			icon: "/static/images/tksh.svg",
			name: "退货/售后",
			path: "/subPackages/return-goods/list"
		},
		{
			badge: 2,
			icon: "/static/images/dpj.svg",
			name: "待评价",
			path: "/subPackages/order/list?tabsCurrent=4"
		},
		{
			badge: 200,
			icon: "/static/images/all-order.svg",
			name: "全部订单",
			path: "/subPackages/order/list"
		}
	]

	const groupBuyingOrderList = [{
			badge: 2,
			icon: "/static/images/dfk.svg",
			name: "拼团中"
		},
		{
			badge: 20,
			icon: "/static/images/dsh.svg",
			name: "待收货"
		},
		{
			badge: 2,
			icon: "/static/images/tksh.svg",
			name: "退货/售后"
		},
		{
			badge: 2,
			icon: "/static/images/dpj.svg",
			name: "待评价"
		},
		{
			badge: 200,
			icon: "/static/images/all-order.svg",
			name: "全部订单"
		}
	]

	const tabsChange = (index) => {
		tabsIndex.value = index
	}

	const orderChange = (path) => {
		if (!path) return;
		navigateTo(path)
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 694rpx;
		padding: 40rpx 20rpx;
		background: $base-color-white;
		border-radius: 24rpx;
		margin: 0 auto;

		.tabs {
			.li {
				position: relative;
				margin-right: 46rpx;

				.li-text {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: $font-size-32;
					color: $base-origin-price-color;
					position: relative;
					z-index: 2;
				}

				.li-text-active {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: $font-size-32;
					color: $base-color;
					position: relative;
					z-index: 2;
				}

				.line {
					width: 124rpx;
					height: 12rpx;
					display: block;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 1;
				}
			}
		}

		.box {
			padding-top: 34rpx;
			display: grid;
			grid-template-columns: repeat(5, 1fr);

			.li {
				line-height: 1;

				.li-icon {
					.icon {
						width: 46rpx;
						height: 46rpx;
						display: block;
					}
				}

				.li-text {
					padding-top: 15rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: $font-size-24;
					color: $base-color;
				}
			}
		}
	}
</style>